<!doctype html>
<html>
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <meta charset="UTF-8">
    <title>飞机详情</title>

    {% include 'template/baseCss.volt' %}
    <link rel="stylesheet" href="/css/vendor/cmp-controls.css" type="text/css">
    <link href="/css/vendor/add-drone-group.less" rel="stylesheet/less" type="text/css">
    <script src="/js/less.min.js"></script>


</head>

<body>

<main>
    <div class="info-group">
        <div class="title-bar">
            <label class="server-id">飞机详情</label>
            <div style="float: right;" class="button" onClick="DataProxy.clickBack()">
                <label class="btn-text">返回</label>
                <img class="del" src="/images/back.png">
            </div>
            {% if user.isSystemAdmin %}

                <div style="float: right;" class="button" id="edit-btn" onClick="DataProxy.clickEdit()">
                    <label class="btn-text" id="btn-edit">编辑</label>
                    <img src="/images/info_edit_edit.png">
                </div>
                <div style="float: right;" class="button" onClick="addDroneEditor.clickHistory(this)">
                    <label class="btn-text">查看历史</label>
                    <img class="history-icon" src="/images/add-drone-group/add-drone-group-history-big.png">
                </div>
            {% endif %}
        </div>

        <div class="info-wrap">
            <table>
                <tr>
                    <th>飞机ID:</th>
                    <td><input id="id" data-name="id" type="text" disabled="disabled">
        </div>
        </td>
        </tr>
        <tr>
            <th>序列号:</th>
            <td><input id="uas_serial_id" data-name="uas_serial_id" type="text" disabled="disabled">
                <div class="history button"></div>
            </td>
        </tr>

        <tr>
            <th>手机号:</th>
            <td><input data-name="phone" data-valid="phone" data-edit="true" type="text" disabled="disabled">
                <div class="history button"></div>
            </td>
        </tr>
        <tr>
            <th>联系人:</th>
            <td><input data-name="contacts" data-edit="true" type="text" disabled="disabled">
                <div class="history button"></div>
            </td>
        </tr>
        <tr>
            <th>飞机状态:</th>
            <td><select data-name="plane_type_id" data-edit="true" disabled="disabled">
                    <option value="">请选择</option>
                    {% for id,name in planeTypeList %}
                        <option value="{{ id }}">{{ name }}</option>
                    {% endfor %}
                </select>
                <div class="history button"></div>
            </td>

        </tr>
        <tr>
            <th>保修到期时间:</th>
            <td><input type="text" data-attr="date" data-edit="true" data-name="warranty_at" disabled="disabled"/>
                <div class="history button"></div>
            </td>
        </tr>
        <tr>
            <th>所属区域:</th>
            <td><select data-name="plane_area_id" data-edit="true" disabled="disabled">
                    <option value="">请选择</option>
                    {% for id,name in planeAreaList %}
                        <option value="{{ id }}">{{ name }}</option>
                    {% endfor %}
                </select>
                <div class="history button"></div>
            </td>
        </tr>
        <tr>
            <th>是否投保第三方险:</th>
            <td><select data-name="insurance" data-edit="true" disabled="disabled">
                    <option value="">请选择</option>
                    <option value="1">是</option>
                    <option value="0">否</option>
                </select>
                <div class="history button"></div>
            </td>
        </tr>
        <tr>
            <th>第三方险开始时间:</th>
            <td><input type="text" data-attr="date" data-edit="true" data-name="insurance_begin_at"
                       disabled="disabled">
                <div class="history button"></div>
            </td>
        </tr>
        <tr>
            <th>是否投保机身险:</th>
            <td><select data-name="fuselage_insurance" data-edit="true" disabled="disabled">
                    <option value="">请选择</option>
                    <option value="1">是</option>
                    <option value="0">否</option>
                </select>
                <div class="history button"></div>
            </td>
        </tr>
        <tr>
            <th>机身险开始时间:</th>
            <td><input type="text" data-attr="date" data-edit="true" data-name="fuselage_begin_at"
                       disabled="disabled">
                <div class="history button"></div>
            </td>
        </tr>
        </table>
        <table>
            <tr>
                <th>飞机型号:</th>
                <td><select data-name="planeModel_id" data-edit="true" disabled="disabled">
                        <option value="">请选择</option>
                        {% for id,name in planeModelList %}
                            <option value="{{ id }}">{{ name }}</option>
                        {% endfor %}
                    </select>
                    <div class="history button"></div>
                </td>
            </tr>
            <tr>
                <th>持有单位:</th>
                <td><input type="text" data-edit="true" data-name="name" disabled="disabled">
                    <div class="history button"></div>
                </td>
            </tr>
            <tr>
                <th>备注:</th>
                <td><input type="text" data-edit="true" data-name="company" disabled="disabled">
                    <div class="history button"></div>
                </td>
            </tr>
            <tr>
                <th>联系地址:</th>
                <td><input type="text" data-edit="true" data-name="address" disabled="disabled">
                    <div class="history button"></div>
                </td>
            </tr>
            <tr>
                <th>购买时间:</th>
                <td><input type="text" data-attr="date" data-edit="true" data-name="buy_at" disabled="disabled">
                    <div class="history button"></div>
                </td>
            </tr>
            <tr>
                <th>保修公里数:</th>
                <td><input type="text" data-valid="number" data-edit="true" data-name="warranty_kilometer"
                           disabled="disabled">
                    <div class="history button"></div>
                </td>
            </tr>

            <tr>
                <th></th>
                <td></td>
            </tr>
            <tr>
                <th>第三方险结束时间:</th>
                <td><input type="text" data-attr="date" data-edit="true" data-name="insurance_end_at"
                           disabled="disabled">
                    <div class="history button"></div>
                </td>
            </tr>
            <tr>
                <th></th>
                <td></td>
            </tr>
            <tr>
                <th>机身险结束时间:</th>
                <td><input type="text" data-attr="date" data-edit="true" data-name="fuselage_end_at"
                           disabled="disabled">
                    <div class="history button"></div>
                </td>
            </tr>
        </table>


    </div>
    </div>
    <div class="info-group">
        <div class="title-bar hidden" id="key-info-title">
            <label class="server-id">关联密钥信息</label>
        </div>

        <div class="info-wrap">

            <table id="key-info-contentA" class="hidden">
                <tr>
                    <th>密钥ID:</th>
                    <td><input type="text" data-name="key_id" disabled="disabled"></td>
                </tr>
                <tr>
                    <th>证书类型:</th>
                    <td><select data-name="key_type" data-edit="true" disabled="disabled">
                            <option value="">请选择</option>
                            <option value="1">混合证书</option>
                            <option value="0">无限期</option>
                        </select></td>
                </tr>
                <tr>
                    <th>试用过期时间:</th>
                    <td><input type="text" data-attr="date" data-edit="true" data-name="key_expired_at"
                               disabled="disabled"></td>
                </tr>
                <tr>
                    <th>试用公里数:</th>
                    <td><input type="text" data-edit="true" data-name="key_kilometer" disabled="disabled"></td>
                </tr>
                <tr>
                    <th>图像处理:</th>
                    <td><select data-name="key_smart_map" data-edit="true" disabled="disabled">
                            <option value="">请选择</option>
                            <option value="1">可用</option>
                            <option value="0">不可用</option>
                        </select>
                    </td>
                </tr>
            </table>

            <table id="key-info-contentB" class="hidden">
                <tr>
                    <th>证书:</th>
                    <td><input type="text" data-name="key_key_data" disabled="disabled"></td>
                </tr>
                <tr>
                    <th>证书更新时间:</th>
                    <td><input type="text" data-attr="date" data-name="key_created_at"
                               disabled="disabled"></td>
                </tr>
                <tr>
                    <th>起始公里数:</th>
                    <td><input type="text" data-edit="true" data-name="key_begin_kilometer" disabled="disabled"></td>
                </tr>
                <tr>
                    <th>ipad授权过的钥匙id:</th>
                    <td><input type="text" data-name="key_key_id" disabled="disabled"></td>
                </tr>


            </table>

        </div>
    </div>

    <div class="save-btn-wrap">
        <p id="save-btn" class="button" onClick="DataProxy.clickSave()">保 存</p>
    </div>
</main>

</body>

{% include 'template/baseJs.volt' %}
<script src="/js/vendor/add-drone-group.js"></script>
<script>

    var DataProxy = {
        editState: false,
        planeUId: false,
        planeId: false,
        prePlaneData: false,
        preKeyData: false,
        init: function () {
            DataAttrBinder.init();
            DataValidBinder.bind();
            this.planeUId = getQueryString("uid");
            this.planeId = getQueryString("id");
            this.requestDetail();
        },
        clickSave: function () {

            if (DataValidBinder.valid()) {
                //点击保存
                var param = new Object();
                var prefixKey = "key_key_";
                $("[data-edit=true]").each(function () {
                    var item = $(this);

                    var name = item.attr("data-name");
                    var value = item.val();


                    if (value && value != "") {
                        if (name.indexOf(prefixKey) == 0) {
                            name = name.substr("key_".length);
                        }
                        if (DataProxy.prePlaneData[name] != value) {
                            param[name] = value;
                        }
                    }
                });
                param['action_key'] = "ACTION_UPDATE";
                param['taget_plane_id'] = $("[data-name=id]").val();
                var keyId = $("[data-name=key_id]").val();
                if (keyId && keyId != "") {
                    param['key_id'] = keyId;
                }
                feimaPost("/plane/detail", param, function (result) {
                    FAlert("更新成功", function () {
                        DataProxy._updateButtonState();
                        DataProxy.requestDetail();

                    });

                });
            }


        },
        clickBack: function () {
            if (this.editState) {
                FConfirm("您确定放弃编辑吗?", function (result) {
                    if (result) {
                        DataProxy._goBack();
                    }
                });
            } else {
                DataProxy._goBack();
            }
        },
        _goBack: function () {
            var pre = decodeURI(getQueryString("prefilter"));
            var from = getQueryString("from");
            window.location.href = from + "?prefilter=" + pre;
            console.info(his);
        },
        clickEdit: function () {

            if (this.editState) {
                FConfirm("您确定放弃编辑吗?", function (result) {
                    if (result) {

                        DataProxy._updateButtonState();
                        DataProxy.updatePageData();
                    }
                });
            } else {
                //取消编辑
                this._updateButtonState();
            }
        },
        requestDetail: function () {
            feimaPost("/plane/detail", {
                "action_key": "ACTION_DETAIL",
                "plane_uid": this.planeUId,
                "plane_id": this.planeId
            }, function (result) {
                if (result) {
                    DataProxy.prePlaneData = result.data["plane"];
                    DataProxy.preKeyData = result.data["key"];
                    DataProxy.updatePageData();
                }
            });
        },
        updatePageData: function () {
            if (DataProxy.prePlaneData) {
                this._updateData(DataProxy.prePlaneData, false);
            }
            if (DataProxy.preKeyData) {
                this._updateData(DataProxy.preKeyData, "key_");
                $("#plane-info-title").text("飞机基本信息");
                $("#key-info-content").removeClass("hidden")
                $("#key-info-title").removeClass("hidden");
                $("#key-info-contentA").removeClass("hidden");
                $("#key-info-contentB").removeClass("hidden");
            } else {
                $("#plane-info-title").text("飞机基本信息(无关联密钥)");
                $("#key-info-content").addClass("hidden");
                $("#key-info-title").addClass("hidden");
                $("#key-info-contentA").addClass("hidden");
                $("#key-info-contentB").addClass("hidden");
            }
        },
        _updateData: function (data, preStr) {
            for (var item in data) {
                var value = data[item] ? data[item] : "";
                item = preStr ? (preStr + item) : item;
                if (this._bindValue(item, value)) {
                    continue;
                }
            }
        },
        _bindValue: function (item, value) {
            var jSelector = "input[data-name=" + item + "]";
            var obj = $(jSelector);
            if (obj.length > 0) {
                obj.val(value);
                return true;
            }
            jSelector = "select[data-name=" + item + "]";
            var obj = $(jSelector);
            if (obj.length > 0) {
                obj.val(value);
                return true;
            }
            return false;
        },
        _updateButtonState: function () {
            this.editState = !this.editState;
            $("#btn-edit").text(this.editState ? "取消编辑" : "编辑");
            hCommon.setElementEnable($("[data-edit=true]"), this.editState);
            hCommon.showElement($("#save-btn"), this.editState);

        }

    };
    $(function () {

        DataProxy.init();
    });

    $(".history").bind("click", function () {

        var pre = $(this).prev();
        var uas = $("#id").val();
        if (pre.is("input") || pre.is("select")) {
            //
        } else {
            pre = pre.prev();
        }
        var name = pre.attr("data-name");

        var title = $(this).parent().prev().text();
        title = title.replace(":", "");
        //请求当前的历史记录

        feimaPost("/plane/doListHistory", {
            "name": name,
            "uas_id": uas
        }, function (result) {

            if (result.status == 0) {
                var data = result.data;
                var viewData = new Array();
                for (var i = 0; i < data.length; i++) {
                    var item = data[i];
                    var user = item["phone"] + "(" + item["nickname"] + ")";
                    viewData.push({
                        "content": item["operation_content"],
                        "user": user,
                        "time": item["created_at"]
                    });
                }

                var historyInfo = {
                    "title": title,
                    "items": viewData
                };
                addDroneEditor.showHistory(historyInfo);
            }

        });


    });
</script>

</html>






